

<template>
	<div>
	<a-config-provider :locale="app.locale">
		<a-layout class="view-home">
			<a-layout-sider
				class="sider-box"
				:theme="layout.sider_theme"
				v-model:collapsed="layout.sider_collapsed"
				:width="layout.sider_width"
				:collapsedWidth="layout.sider_collapsed_width"
			>
				<!-- LOGO区域 -->
				<div
					class="logo-box flex-box justify-center"
					:style="{
						width: layout.sider_collapsed ? layoutStyle.sider_collapsed_width : layoutStyle.sider_width,
					}"
				>
					<div v-if="!layout.sider_collapsed" class="flex-box w-full mx-4">
						<a-input-search
							class="w-full rounded-full"
							v-model:value="side_menu.search_word"
							allow-clear
							placeholder="可搜索名称"
							style="border-color:#00f"
						/>
					</div>
					<div v-else></div>
				</div>
				<!-- 左侧菜单 -->
				<div class="sider-menu-box scroll-bar scroll-bar-white">
					<SideMenu
						:tags="apidata.tags_data"
						:search-word="side_menu.search_word"
						:loading="apidata.api_data_loading"
						@click-tag="side_menu.onClickTag"
						@click-path="side_menu.onClickPath"
					/>
				</div>
			</a-layout-sider>
			<a-layout>
				<!-- 顶部导航条 -->			
				<!--
				<a-layout-header
					class="navbar-box px-0"
					:style="{
						height: layoutStyle.navbar_height,
						left: layout.sider_collapsed ? layoutStyle.sider_collapsed_width : layoutStyle.sider_width,
					}"
				>
					<TopMenu
						v-model:sider-collapsed="layout.sider_collapsed"
						v-model:current-server-index="apidata.current_server_index"
						:servers="apidata.api_data && Array.isArray(apidata.api_data.servers) ? apidata.api_data.servers : []"
						:api-groups="apidata.groups"
						:current-group="apidata.current_group"
						@change-group="apidata.current_group_index = $event.index"
						@click-params-tool="global_params.show_tool_modal = true"
					/>
				</a-layout-header>
				-->				
				<a-layout-content
					class="layout-content-box"					
					:style="{
						marginLeft: layout.sider_collapsed ? layoutStyle.sider_collapsed_width : layoutStyle.sider_width,
					}"
				>
					<PageContent
						ref="PageContentRef"
						:tags="apidata.tags_data"
						:loading="apidata.api_data_loading"
						:server="apidata.current_server"
						:global-params="global_params.params"
					/>
				</a-layout-content>
				
				<!--
				<a-layout-footer
                class="layout-footer-box"
                :style="{
                    marginLeft: layout.sider_collapsed ? layoutStyle.sider_collapsed_width : layoutStyle.sider_width,
                }"
            >
				</a-layout-footer>
				-->
			</a-layout>
		</a-layout>
		<!--
		<GlobalParamsTool
			v-model:show="global_params.show_tool_modal"
			v-model:params="global_params.params"
			:api-url="apidata.current_group?.link ?? ''"
		/>
		-->
	</a-config-provider>
	</div>
</template>

<script setup lang="ts">

// 引入 andv
// import 'ant-design-vue/dist/antd.css'
// 引入 tailwind
import './index.css'
import { ref, computed, reactive, watch, onMounted } from "vue";
import { useWindowSize } from "@vueuse/core";
import { url } from 'llm-web-tool'

import { Modal } from 'ant-design-vue';
import zh_Cn from 'ant-design-vue/es/locale/zh_CN'

import SideMenu from "/@/views/wiki/components/side-menu/index.vue";
import TopMenu from '/@/views/wiki/components/top-menu/index.vue'
import PageContent from '/@/views/wiki/components/page-conetent/index.vue'
import GlobalParamsTool from '/@/views/wiki/components/global-params-tool/index.vue'

import { Swagger } from '/@/views/wiki/constants/swagger'

import { OriginApiGroup } from '/@/views/wiki/constants/app'
import { Tag, GlobalParam } from '/@/views/wiki/constants/app'

// refs
const PageContentRef = ref();

// 全局配置
const app = reactive({
	locale: zh_Cn
})

// 布局
const layout = reactive({
	// 顶部栏高度
	navbar_height: 56,
	// 左侧导航宽度
	sider_width: 254,
	// 左侧导航折叠宽度
	sider_collapsed_width: 0,
	// 左侧菜单主题
	sider_theme: 'light',

	// 左侧导航是否折叠
	sider_collapsed: false,
});
const layoutStyle = computed(() => ({
	navbar_height: `${layout.navbar_height}px`,
	sider_width: `${layout.sider_width}px`,
	sider_collapsed_width: `${layout.sider_collapsed_width}px`,
}));

// 处理屏幕宽度变化自动收缩

const { width } = useWindowSize();

watch(
	() => width.value,
	(w) => (layout.sider_collapsed = w <= 650),
	{ immediate: true }
);


// 全局参数
const global_params = reactive({
	show_tool_modal: false,
	params: [] as GlobalParam[],
})

// 左侧导航的数据
const side_menu = reactive({
	// 搜索词
	search_word: '',
	// 点击Tag
	//onClickTag: (tag) => PageContentRef.value?.scrollToTag(tag.name, -layout.navbar_height - 10),
	onClickTag: (tag) => PageContentRef.value?.scrollToTag(tag.name, - 10),
	// 点击Path
	//onClickPath: (path) => PageContentRef.value?.scrollToPath(path, -layout.navbar_height - 10)
	onClickPath: (path) => {
		let off=PageContentRef.value?.scrollToPath(path, - 10);
		//console.log(off);
		document.querySelector('.layout-content-box').scrollTop=off;	
	}
})

// 加载一个api文档数据
const loadApi = (url: string) => {
	apidata.tags_data = []
	apidata.api_data_loading = true;
	fetch(url).then(res => res.json()).then(res => {
		apidata.api_data = res as Swagger.Spec3;
		// 处理server默认值
		if (Array.isArray(apidata.api_data.servers) && apidata.api_data.servers.length) apidata.current_server_index = 0;

		// 处理api分组
		if (apidata.api_data.paths) {
			Object.keys(apidata.api_data.paths).forEach(path => {
				let api = (apidata.api_data as Swagger.Spec3).paths[path];
				Object.keys(api).forEach(opt => {
					let operation = api[opt] as Swagger.Operation3;
					if (operation.tags) {
						operation.tags.forEach(tag_name => {
							let find_tag = apidata.tags_data.find(t => t.name == tag_name);
							if (!find_tag) apidata.tags_data.push({ name: tag_name, paths: { [path]: api } })
							else find_tag.paths[path] = api;
						})
					}
				})
			})
		}
	}).catch(e => {
		Modal.error({ title: `从${url}获取Api信息失败` })
	}).finally(() => apidata.api_data_loading = false)
}

// api整体数据

const apidata = reactive({
	// 多个api分组
	groups: [] as OriginApiGroup[],
	groups_loading: false,
	current_group_index: -1,
	current_group: computed(() => apidata.groups[apidata.current_group_index] ?? null),

	// api原始数据
	api_data: null as null | Swagger.Spec3,
	api_data_loading: false,

	// servers
	current_server_index: -1,
	current_server: computed(() => {
		return []
	}),

	// 处理后的Tags数据
	tags_data: [] as Tag[],
});

// 当前选择的分组变化，重新获取api数据

watch(() => apidata.current_group_index, (index) => {
	if (!apidata.groups[index]) {
		apidata.api_data = null;
		return;
	}
	loadApi(apidata.groups[index].link);
})

onMounted(() => {
	// 获取api数据
	let apiGroupUrl = url.getHashVar('group');
	if (apiGroupUrl) {
		apidata.groups_loading = true;
		fetch(apiGroupUrl as string).then(res => res.json()).then(res => {
			apidata.groups = res;
			if (apidata.groups.length) apidata.current_group_index = 0;
		}).catch(e => {
			Modal.error({ title: `从${apiGroupUrl}获取Group信息失败` })
		}).finally(() => apidata.groups_loading = false)
	} else {
		// 从单个url获取一个api文档
		//let apiUrl = url.getHashVar('http://localhost:3000/?url=/example/url.json');
		//console.log('URL...........='+apiUrl);
		let apiUrl='/static/docs/url.json';
		loadApi(apiUrl as string);
	};
	let items=new Array(30).fill(null).map((_, i) => {
		const id = String(i);
		return {
			label: `Tab-${id}`,
			key: id,
			disabled: i === 28,
			children: `Content  tab ${id}`,
		};
	});
	console.log(items);
})
</script>
<style lang="less">
.view-home {	
	.sider-box {		
		position: absolute;	
		top:16px;
		left: auto;
		bottom: 12px;
	}
	.logo-box {
		height: v-bind("layoutStyle.navbar_height");
		color: #fff;
		transition: width 0.2s;
	}
	.navbar-box {
		position: fixed;
		height: v-bind("layoutStyle.navbar_height");
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
		background: #fff;
		top: auto;
		right: auto;
		transition: left 0.2s;
	}
	.sider-menu-box {
		height: calc(100vh - v-bind("layoutStyle.navbar_height"));
		overflow-y: auto;
	}
	.layout-content-box {
		height: calc(100vh - v-bind("layoutStyle.navbar_height"));
		overflow: scroll;
		position: fixed;		
		transition: margin-left 0.2s;
	}
	.layout-footer-box {
		transition: margin-left 0.2s;
	}
}
</style>
